// import React, { useState, useEffect } from "react"
// import {
//   Input,
//   Space,
//   Select,
//   Button,
//   Drawer,
//   Table,
//   Form,

// } from 'antd';
// import { useRequest } from 'ahooks';
// import { getClassList } from '../../../../../service'
// import style from './Tables.module.scss'
// import type { TableProps } from 'antd';



// // ----------------------------------------------------------------
// const Tables = () => {
//   const handleChange = (value: string) => {
//     console.log(value);
//   };

//   interface DataType {
//     key: string;
//     name: string;
//     age: number;
//     address: string;
//   }

//   // 数据
//   const [classDatas, setclassDatas] = useState([])
//   // 上方展开收起
//   const [open, setOpen] = useState(false)
//   const [total, setTotal] = useState(0);
//   const [query, setQuery] = useState({ page: 1, pagesize: 5 });
//   const { loading } = useRequest(getClassList);
//   const [editingKey, setEditingKey] = useState<string | number>('');
//   const [form] = Form.useForm();
//   // 等待请求数据
//   const getListData = async (params: { page: number, pagesize: number }) => {
//     try {
//       const res = await getClassList(params)
//       setclassDatas(res.data.data.list)
//       setTotal(res.data.data.total)
//       console.log(res.data.data.list)
//     } catch (e) {
//       console.log(e)
//     }
//   }
//   useEffect(() => {
//     getListData(query)
//   }, [query])

//   const isEditing = (record: any) => record._id === editingKey
//   const edit = (record: any) => {
//     form.setFieldsValue({ ...record })
//     setEditingKey(record._id)
//   }

//   const save = async (key: string | number) => {
//     try {
//       const row = await form.validateFields()
//       const newData = [...classDatas]
//       const index = newData.findIndex(item => key === item._id)
//       if (index > -1) {
//         const item = newData[index]
//         newData.splice(index, 1, { ...item, ...row })
//         setclassDatas(newData)
//         setEditingKey('')
//       } else {
//         newData.push(row)
//         setclassDatas(newData)
//         setEditingKey('')
//       }
//       // 如果需要发送请求更新数据，可以在这里调用 API
//       console.log('Updated data:', newData)
//     } catch (errInfo) {
//       console.log('Validate Failed:', errInfo)
//     }
//   };



//   // 展示
//   const showDrawer = () => {
//     setOpen(true);
//   };

//   const onClose = () => {
//     setOpen(false);
//   };


//   interface DataType {
//     classify: string;
//     name: string;
//     teacher: number;
//     createTime: number;
//     sort: string;
//   }





//   const columns: TableProps<DataType>['columns'] = [
//     {
//       title: '排序',
//       dataIndex: '_id',
//       key: '_id',
//       render: (_, record, index) => <p className={style.indexs}>{index + 1}</p>
//     },
//     {
//       title: '班级名称',
//       dataIndex: 'name',
//       key: 'name',
//       editable: true,
//       render: (text, record) => {
//         const editable = isEditing(record);
//         return editable ? (
//           <Form.Item
//             name="name"
//             rules={[{ required: true, message: '请输入班级名称' }]}
//           >
//             <Input onPressEnter={() => save(record._id)} />
//           </Form.Item>
//         ) : (
//           text
//         );
//       }
//     },
//     {
//       title: '老师',
//       dataIndex: 'teacher',
//       key: 'teacher',
//       editable: true,
//       render: (text, record) => {
//         const editable = isEditing(record);
//         return editable ? (
//           <Form.Item
//             name="teacher"
//             rules={[{ required: true, message: '请输入老师名称' }]}
//           >
//             <Input onPressEnter={() => save(record._id)} />
//           </Form.Item>
//         ) : (
//           text
//         );
//       }
//     },
//     {
//       title: '科目类别',
//       key: 'classify',
//       dataIndex: 'classify',
//       editable: true,
//       render: (text, record) => {
//         const editable = isEditing(record);
//         return editable ? (
//           <Form.Item
//             name="classify"
//             rules={[{ required: true, message: '请输入科目类别' }]}
//           >
//             <Input onPressEnter={() => save(record._id)} />
//           </Form.Item>
//         ) : (
//           text
//         );
//       }
//     },
//     {
//       title: '创建时间',
//       key: 'createTime',
//       dataIndex: 'createTime',
//       render: (_, record) => {
//         return <div>{new Date(record.createTime).toISOString().split('T')[0]}</div>
//       }
//     },
//     {
//       title: '操作',
//       key: 'operate',
//       dataIndex: 'operate',
//       render: (_, record) => {
//         const editable = isEditing(record);
//         return editable ? (
//           <Space size="middle">
//             <Button type="link" onClick={() => save(record._id)}>
//               保存
//             </Button>
//             <Button type="link" onClick={cancel}>
//               取消
//             </Button>
//           </Space>
//         ) : (
//           <Space size="middle">
//             <Button type="link" onClick={() => edit(record)}>
//               编辑
//             </Button>
//             <Button type="link">
//               查看
//             </Button>
//           </Space>
//         );
//       },
//     },
//   ];

//   const mergedColumns = columns.map(col => {
//     if (!col.editable) {
//       return col;
//     }
//     return {
//       ...col,
//       onCell: (record: any) => ({
//         record,
//         inputType: 'text',
//         dataIndex: col.dataIndex,
//         title: col.title,
//         editing: isEditing(record),
//       }),
//     };
//   });


//   return (

//     <div className={style.box}>
//       <div className={style.btn}>
//         <Button color="pink" variant="solid" onClick={showDrawer}>
//           + 新建班级
//         </Button>
//         <Drawer title="新建班级" onClose={onClose} open={open} width={'50%'}>
//           <div>
//             <div>
//               <p><span style={{ color: 'red' }}>*</span>班级名称</p>
//               <Input defaultValue="" style={{ width: '40%' }} />
//             </div>
//             <div>
//               <p><span style={{ color: 'red' }}>*</span>老师</p>
//               <Select
//                 defaultValue="请选择"
//                 style={{ width: 120 }}
//                 onChange={handleChange}
//                 options={[
//                   { value: 'jack', label: 'Jack' },
//                   { value: 'lucy', label: 'Lucy' },
//                   { value: 'Yiminghe', label: 'yiminghe' },
//                   { value: 'disabled', label: 'Disabled', disabled: true },
//                 ]}
//               />
//             </div>
//             <div>
//               <p><span style={{ color: 'red' }}>*</span>班级进度</p>
//               <Select
//                 defaultValue="请选择"
//                 style={{ width: 120 }}
//                 onChange={handleChange}
//                 options={[
//                   { value: 'jack', label: 'Jack' },
//                   { value: 'lucy', label: 'Lucy' },
//                   { value: 'Yiminghe', label: 'yiminghe' },
//                   { value: 'disabled', label: 'Disabled', disabled: true },
//                 ]}
//               />
//             </div>
//           </div>
//         </Drawer>

//       </div>
//       <Form form={form} component={false}>
//         <Table
//           loading={loading}
//           columns={mergedColumns}
//           dataSource={classDatas}
//           pagination={{
//             total,
//             current: query.page,
//             pageSize: query.pagesize,
//             pageSizeOptions: [5, 10, 15, 20],
//             showSizeChanger: true,
//             onChange: (page, pageSize) => {
//               setQuery({ ...query, page, pagesize: pageSize });
//               console.log(page, pageSize);
//             },
//             showTotal: (total, range) => `第${range[0]}-${range[1]}条 / 总共${total} 条`,
//           }}
//         />
//       </Form>
//     </div>
//   )

// }
// export default Tables

// import React, { useState, useEffect } from "react"
// import {
//   Input,
//   Space,
//   Select,
//   Button,
//   Drawer,
//   Table,
//   Form,
// } from 'antd';
// import { useRequest } from 'ahooks';
// import { getClassList } from '../../../../../service'
// import style from './Tables.module.scss'
// import type { TableProps } from 'antd';

// interface ClassData {
//   _id: string;
//   name: string;
//   teacher: string;
//   classify: string;
//   createTime: number;
//   [key: string]: any; // for other dynamic properties
// }

// const Tables = () => {
//   const handleChange = (value: string) => {
//     console.log(value);
//   };

//   // 数据
//   const [classDatas, setclassDatas] = useState<ClassData[]>([])
//   // 上方展开收起
//   const [open, setOpen] = useState(false)
//   const [total, setTotal] = useState(0);
//   const [query, setQuery] = useState({ page: 1, pagesize: 5 });
//   const { loading } = useRequest(() => getClassList(query));
//   const [editingKey, setEditingKey] = useState<string>('');
//   const [form] = Form.useForm();

//   // 等待请求数据
//   const getListData = async (params: { page: number, pagesize: number }) => {
//     try {
//       const res = await getClassList(params)
//       setclassDatas(res.data.data.list)
//       setTotal(res.data.data.total)
//       console.log(res.data.data.list)
//     } catch (e) {
//       console.log(e)
//     }
//   }

//   useEffect(() => {
//     getListData(query)
//   }, [query])

//   const isEditing = (record: ClassData) => record._id === editingKey
  
//   const edit = (record: ClassData) => {
//     form.setFieldsValue({ ...record })
//     setEditingKey(record._id)
//   }

//   const cancel = () => {
//     setEditingKey('');
//   };

//   const save = async (key: string) => {
//     try {
//       const row = await form.validateFields()
//       const newData = [...classDatas]
//       const index = newData.findIndex(item => key === item._id)
//       if (index > -1) {
//         const item = newData[index]
//         newData.splice(index, 1, { ...item, ...row })
//         setclassDatas(newData)
//         setEditingKey('')
//       } else {
//         newData.push(row as ClassData)
//         setclassDatas(newData)
//         setEditingKey('')
//       }
//       // 如果需要发送请求更新数据，可以在这里调用 API
//       console.log('Updated data:', newData)
//     } catch (errInfo) {
//       console.log('Validate Failed:', errInfo)
//     }
//   };

//   // 展示
//   const showDrawer = () => {
//     setOpen(true);
//   };

//   const onClose = () => {
//     setOpen(false);
//   };

//   const columns: TableProps<ClassData>['columns'] = [
//     {
//       title: '排序',
//       dataIndex: '_id',
//       key: '_id',
//       render: (_, record, index) => <p className={style.indexs}>{index + 1}</p>
//     },
//     {
//       title: '班级名称',
//       dataIndex: 'name',
//       key: 'name',
//       editable: true,
//       render: (text, record) => {
//         const editable = isEditing(record);
//         return editable ? (
//           <Form.Item
//             name="name"
//             rules={[{ required: true, message: '请输入班级名称' }]}
//           >
//             <Input onPressEnter={() => save(record._id)} />
//           </Form.Item>
//         ) : (
//           text
//         );
//       }
//     },
//     {
//       title: '老师',
//       dataIndex: 'teacher',
//       key: 'teacher',
//       editable: true,
//       render: (text, record) => {
//         const editable = isEditing(record);
//         return editable ? (
//           <Form.Item
//             name="teacher"
//             rules={[{ required: true, message: '请输入老师名称' }]}
//           >
//             <Input onPressEnter={() => save(record._id)} />
//           </Form.Item>
//         ) : (
//           text
//         );
//       }
//     },
//     {
//       title: '科目类别',
//       key: 'classify',
//       dataIndex: 'classify',
//       editable: true,
//       render: (text, record) => {
//         const editable = isEditing(record);
//         return editable ? (
//           <Form.Item
//             name="classify"
//             rules={[{ required: true, message: '请输入科目类别' }]}
//           >
//             <Input onPressEnter={() => save(record._id)} />
//           </Form.Item>
//         ) : (
//           text
//         );
//       }
//     },
//     {
//       title: '创建时间',
//       key: 'createTime',
//       dataIndex: 'createTime',
//       render: (_, record) => {
//         return <div>{new Date(record.createTime).toISOString().split('T')[0]}</div>
//       }
//     },
//     {
//       title: '操作',
//       key: 'operate',
//       dataIndex: 'operate',
//       render: (_, record) => {
//         const editable = isEditing(record);
//         return editable ? (
//           <Space size="middle">
//             <Button type="link" onClick={() => save(record._id)}>
//               保存
//             </Button>
//             <Button type="link" onClick={cancel}>
//               取消
//             </Button>
//           </Space>
//         ) : (
//           <Space size="middle">
//             <Button type="link" onClick={() => edit(record)}>
//               编辑
//             </Button>
//             <Button type="link">
//               查看
//             </Button>
//           </Space>
//         );
//       },
//     },
//   ];

//   const mergedColumns = columns.map(col => {
//     if (!col.editable) {
//       return col;
//     }
//     return {
//       ...col,
//       onCell: (record: ClassData) => ({
//         record,
//         inputType: 'text',
//         dataIndex: col.dataIndex,
//         title: col.title,
//         editing: isEditing(record),
//       }),
//     };
//   });

//   return (
//     <div className={style.box}>
//       <div className={style.btn}>
//         <Button type="primary" onClick={showDrawer}>
//           + 新建班级
//         </Button>
//         <Drawer title="新建班级" onClose={onClose} open={open} width={'50%'}>
//           <div>
//             <div>
//               <p><span style={{ color: 'red' }}>*</span>班级名称</p>
//               <Input defaultValue="" style={{ width: '40%' }} />
//             </div>
//             <div>
//               <p><span style={{ color: 'red' }}>*</span>老师</p>
//               <Select
//                 defaultValue="请选择"
//                 style={{ width: 120 }}
//                 onChange={handleChange}
//                 options={[
//                   { value: 'jack', label: 'Jack' },
//                   { value: 'lucy', label: 'Lucy' },
//                   { value: 'Yiminghe', label: 'yiminghe' },
//                   { value: 'disabled', label: 'Disabled', disabled: true },
//                 ]}
//               />
//             </div>
//             <div>
//               <p><span style={{ color: 'red' }}>*</span>班级进度</p>
//               <Select
//                 defaultValue="请选择"
//                 style={{ width: 120 }}
//                 onChange={handleChange}
//                 options={[
//                   { value: 'jack', label: 'Jack' },
//                   { value: 'lucy', label: 'Lucy' },
//                   { value: 'Yiminghe', label: 'yiminghe' },
//                   { value: 'disabled', label: 'Disabled', disabled: true },
//                 ]}
//               />
//             </div>
//           </div>
//         </Drawer>
//       </div>
//       <Form form={form} component={false}>
//         <Table
//           loading={loading}
//           columns={mergedColumns}
//           dataSource={classDatas}
//           rowKey="_id"
//           pagination={{
//             total,
//             current: query.page,
//             pageSize: query.pagesize,
//             pageSizeOptions: [5, 10, 15, 20],
//             showSizeChanger: true,
//             onChange: (page, pageSize) => {
//               setQuery({ ...query, page, pagesize: pageSize });
//               console.log(page, pageSize);
//             },
//             showTotal: (total, range) => `第${range[0]}-${range[1]}条 / 总共${total} 条`,
//           }}
//         />
//       </Form>
//     </div>
//   )
// }

// export default Tables

import React, { useState, useEffect } from "react"
import {
  Input,
  Space,
  Select,
  Button,
  Drawer,
  Table,
  Form,
} from 'antd';
import { useRequest } from 'ahooks';
import { getClassList } from '../../../../../service'
import style from './Tables.module.scss'
import type { TableProps } from 'antd';

interface ClassData {
  _id: string;
  name: string;
  teacher: string;
  classify: string;
  createTime: number;
  [key: string]: any;
}

interface DataType {
  classify: string;
  name: string;
  teacher: number;
  createTime: number;
  sort: string;
}

type SizeType = ConfigProviderProps['componentSize'];
const { Option } = Select;
const handleChange = (value: string) => {
  console.log(value);
};


const columns: TableProps<DataType>['columns'] = [
  {
    title: '排序',
    dataIndex: 'sort',
    key: 'sort',
    render: (_, record, index) => {
      return <div className={style.indexs}>{index + 1}</div>
    },
  },
  {
    title: '班级名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '老师',
    dataIndex: 'teacher',
    key: 'teacher',
  },
  {
    title: '科目类别',
    key: 'classify',
    dataIndex: 'classify',

  },
  {
    title: '创建时间',
    key: 'createTime',
    dataIndex: 'createTime',
    render: (_, record) => {
      return <div>{new Date(record.createTime).toISOString().split('T')[0]}</div>
    }
  },
  {
    title: '操作',
    key: 'operate',
    dataIndex: 'operate',
    render: () => (
      <Space size="middle">
        <a>编辑</a>
        <a>查看</a>
      </Space>
    ),
  },
];


// ----------------------------------------------------------------
const Tables = () => {
  const handleChange = (value: string) => {
    console.log(value);
  };

  const [classDatas, setclassDatas] = useState<ClassData[]>([])
  const [open, setOpen] = useState(false)
  const [total, setTotal] = useState(0);
  const [query, setQuery] = useState({ page: 1, pagesize: 5 });
  const { loading } = useRequest(() => getClassList(query));
  const [editingKey, setEditingKey] = useState<string>('');
  const [form] = Form.useForm();

  const getListData = async (params: { page: number, pagesize: number }) => {
    try {
      const res = await getClassList(params)
      setclassDatas(res.data.data.list)
      setTotal(res.data.data.total)
      console.log(res.data.data.list)
    } catch (e) {
      console.log(e)
    }
  }

  useEffect(() => {
    getListData(query)
  }, [query])

  const isEditing = (record: ClassData) => record._id === editingKey
  
  const edit = (record: ClassData) => {
    form.setFieldsValue({ ...record })
    setEditingKey(record._id)
  }

  const cancel = () => {
    setEditingKey('');
  };

  const save = async (key: string) => {
    try {
      const row = await form.validateFields()
      const newData = [...classDatas]
      const index = newData.findIndex(item => key === item._id)
      if (index > -1) {
        const item = newData[index]
        newData.splice(index, 1, { ...item, ...row })
        setclassDatas(newData)
        setEditingKey('')
      } else {
        newData.push(row as ClassData)
        setclassDatas(newData)
        setEditingKey('')
      }
      console.log('Updated data:', newData)
    } catch (errInfo) {
      console.log('Validate Failed:', errInfo)
    }
  };

  const showDrawer = () => {
    setOpen(true);
  };

  const onClose = () => {
    setOpen(false);
  };

  const columns: TableProps<ClassData>['columns'] = [
    {
      title: '排序',
      dataIndex: '_id',
      key: '_id',
      render: (_, record, index) => <p className={style.indexs}>{index + 1}</p>
    },
    {
      title: '班级名称',
      dataIndex: 'name',
      key: 'name',
      render: (text, record) => {
        const editable = isEditing(record);
        return editable ? (
          <Form.Item
            name="name"
            rules={[{ required: true, message: '请输入班级名称' }]}
            style={{ margin: 0 }}
          >
            <Input onPressEnter={() => save(record._id)} />
          </Form.Item>
        ) : (
          text
        );
      }
    },
    {
      title: '老师',
      dataIndex: 'teacher',
      key: 'teacher',
      render: (text, record) => {
        const editable = isEditing(record);
        return editable ? (
          <Form.Item
            name="teacher"
            rules={[{ required: true, message: '请输入老师名称' }]}
            style={{ margin: 0 }}
          >
            <Input onPressEnter={() => save(record._id)} />
          </Form.Item>
        ) : (
          text
        );
      }
    },
    {
      title: '科目类别',
      key: 'classify',
      dataIndex: 'classify',
      render: (text, record) => {
        const editable = isEditing(record);
        return editable ? (
          <Form.Item
            name="classify"
            rules={[{ required: true, message: '请输入科目类别' }]}
            style={{ margin: 0 }}
          >
            <Input onPressEnter={() => save(record._id)} />
          </Form.Item>
        ) : (
          text
        );
      }
    },
    {
      title: '创建时间',
      key: 'createTime',
      dataIndex: 'createTime',
      render: (_, record) => {
        return <div>{new Date(record.createTime).toISOString().split('T')[0]}</div>
      }
    },
    {
      title: '操作',
      key: 'operate',
      render: (_, record) => {
        const editable = isEditing(record);
        return editable ? (
          <Space size="middle">
            <Button type="link" onClick={() => save(record._id)}>
              保存
            </Button>
            <Button type="link" onClick={cancel}>
              取消
            </Button>
          </Space>
        ) : (
          <Space size="middle">
            <Button type="link" onClick={() => edit(record)}>
              编辑
            </Button>
            <Button type="link">
              查看
            </Button>
          </Space>
        );
      },
    },
  ];

  return (
    <div className={style.box}>
      <div className={style.btn}>
        <Button type="primary" onClick={showDrawer}>
          + 新建班级
        </Button>
        <Drawer title="新建班级" onClose={onClose} open={open} width={'50%'}>
          <div>
            <div>
              <p><span style={{ color: 'red' }}>*</span>班级名称</p>
              <Input defaultValue="" style={{ width: '40%' }} />
            </div>
            <div>
              <p><span style={{ color: 'red' }}>*</span>老师</p>
              <Select
                defaultValue="请选择"
                style={{ width: 120 }}
                onChange={handleChange}
                options={[
                  { value: 'jack', label: 'Jack' },
                  { value: 'lucy', label: 'Lucy' },
                  { value: 'Yiminghe', label: 'yiminghe' },
                  { value: 'disabled', label: 'Disabled', disabled: true },
                ]}
              />
            </div>
            <div>
              <p><span style={{ color: 'red' }}>*</span>班级进度</p>
              <Select
                defaultValue="请选择"
                style={{ width: 120 }}
                onChange={handleChange}
                options={[
                  { value: 'jack', label: 'Jack' },
                  { value: 'lucy', label: 'Lucy' },
                  { value: 'Yiminghe', label: 'yiminghe' },
                  { value: 'disabled', label: 'Disabled', disabled: true },
                ]}
              />
            </div>
          </div>
        </Drawer>
      </div>
      <Form form={form} component={false}>
        <Table
          loading={loading}
          columns={columns}
          dataSource={classDatas}
          rowKey="_id"
          pagination={{
            total,
            current: query.page,
            pageSize: query.pagesize,
            pageSizeOptions: [5, 10, 15, 20],
            showSizeChanger: true,
            onChange: (page, pageSize) => {
              setQuery({ ...query, page, pagesize: pageSize });
              console.log(page, pageSize);
            },
            showTotal: (total, range) => `第${range[0]}-${range[1]}条 / 总共${total} 条`,
          }}
        />
      </Form>
    </div>
  )
}

export default Tables


      // <Table
      //   columns={columns}
//         dataSource={classDatas}
//         rowKey="_id"
//         pagination={{
//           pageSize: 5
//         }}
//       />
//     </div>
//   )
// }
// export default Tables
